<script setup lang="ts">
  import { PropType, ref } from 'vue'
  import CostDetail from '@/views/order/ocost/components/CostDetail.vue'
  import FormModal from './FormModal.vue'
  import { useGetOrderDetailFees } from '@/services/module/order/useFee'
  import { useUserStore } from '@/store/modules/user'

  defineOptions({
    name: 'OrderFeeList',
  })

  const { fees, feesTotal, getFeesParam, getFeesLoading, getFees } = useGetOrderDetailFees()

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'updated'): void
  }>()

  // 客户状态管理
  const userStore = useUserStore()

  // 正在编辑的费用id
  const editingFeeId = ref('')

  // 费用申请审核弹窗显示状态
  const formModalVisible = ref(false)

  // 费用id
  const costId = ref('')

  // 费用详情弹窗状态
  const costDetailModalVisible = ref(false)

  // 查看费用详细
  const handleViewCostDetail = (n: string) => {
    costDetailModalVisible.value = true
    costId.value = n
  }

  /**
   * 表格更新事件
   */
  const onUpdateTableData = () => {
    getFees(props.orderDetail.id)
    emits('updated')
  }

  /**
   * 编辑点击事件
   * @param {string} feeId - 费用id
   */
  const handleFeeEditClick = (feeId: string) => {
    editingFeeId.value = feeId
    formModalVisible.value = true
  }

  /**
   * 申请费用点击事件
   */
  const onApplyFeeClick = () => {
    editingFeeId.value = ''
    formModalVisible.value = true
  }

  defineExpose({
    getFees: () => {
      getFeesParam.value.limit = 100
      if (props.orderDetail) {
        getFees(props.orderDetail.id)
      }
    },
    getFeesLoading,
    fees,
  })
</script>

<template>
  <div class="order-fee-list">
    <div class="header">
      <span class="title">服务费用({{ feesTotal }})</span>
      <h-plain-button
        v-if="props.orderDetail.status === 3"
        :padding-lr="6"
        :height="22"
        @click="onApplyFeeClick"
      >
        申请费用
      </h-plain-button>
    </div>
    <el-table resizable :data="fees" stripe :border="true">
      <!-- 序号 -->
      <el-table-column type="index" label="序号" fixed="left" width="50" :align="'center'" />

      <!-- 费用单号 -->
      <el-table-column
        show-overflow-tooltip
        fixed="left"
        prop="workFeeNo"
        label="费用单号"
        width="140"
      >
        <template #default="{ row }">
          <h-link @click="handleViewCostDetail(row.workFeeId)">
            {{ row.workFeeNo }}
          </h-link>
        </template>
      </el-table-column>

      <!-- 结算类型 -->
      <el-table-column show-overflow-tooltip prop="settlementType" label="结算类型" width="120">
        <template #default="{ row }">{{
          row.type === 1 ? '公司承担' : row.type === 2 ? '收取客户' : '支付部门'
        }}</template>
      </el-table-column>

      <!-- 费用名称 -->
      <el-table-column show-overflow-tooltip prop="name" label="费用名称" min-width="100" />

      <!-- 数量 -->
      <el-table-column show-overflow-tooltip prop="qty" label="数量" width="50" />

      <!-- 公里数 -->
      <!-- <el-table-column show-overflow-tooltip prop="kilometers" label="公里数" width="80">
        <template #default="{ row }">
          {{
            row.kilometersList
              .map((item: string) => Number(item) || 0)
              .reduce((prev: number, current: number) => prev + current, 0)
          }}
        </template>
      </el-table-column> -->

      <!-- 公司承担总费用 -->
      <el-table-column
        v-if="!userStore.isCurrentRoleNetwork"
        show-overflow-tooltip
        prop="price"
        label="公司承担总费用"
        width="110"
      >
        <template #default="{ row }"> ￥{{ (row.price || 0).toFixed(2) }} </template>
      </el-table-column>

      <!-- 收取客户总费用 -->
      <el-table-column
        v-if="!userStore.isCurrentRoleNetwork"
        show-overflow-tooltip
        prop="customerUndertakePrice"
        label="收取客户总费用"
        width="110"
      >
        <template #default="{ row }">
          ￥{{ (row.customerUndertakePrice || 0).toFixed(2) }}
        </template>
      </el-table-column>

      <!-- 支付部门总费用 -->
      <el-table-column
        show-overflow-tooltip
        prop="networkUndertakePrice"
        label="支付部门总费用"
        width="110"
      >
        <template #default="{ row }">
          ￥{{ (row.networkUndertakePrice || 0).toFixed(2) }}
        </template>
      </el-table-column>

      <!-- 申请人员 -->
      <el-table-column show-overflow-tooltip prop="applyEmp" label="申请人员" width="120" />

      <!-- 申请时间 -->
      <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="128" />

      <!-- 审核时间 -->
      <el-table-column show-overflow-tooltip prop="reviewTime" label="审核时间" width="128" />

      <!-- 状态 -->
      <el-table-column prop="state" label="状态" width="83" fixed="right" :align="'center'">
        <template #default="{ row }">
          <div class="flex_justify_center">
            <h-status v-if="row.status == 1" type="warning">待审核</h-status>
            <h-status v-if="row.status == 2" type="success">已通过</h-status>
            <h-status v-if="row.status == 3" type="error">已驳回</h-status>
            <h-status v-if="row.status == 4" type="info">已撒回</h-status>
            <h-status v-if="row.status == 5" type="info">已取消</h-status>
          </div>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="50" fixed="right" :align="'center'">
        <template #default="{ row }">
          <h-link v-permission="'order_update_fee'" @click="handleFeeEditClick(row.workFeeId)">
            编辑
          </h-link>
        </template>
      </el-table-column>
    </el-table>

    <cost-detail v-model="costDetailModalVisible" :fee-id="costId" />

    <form-modal
      v-model="formModalVisible"
      :work-id="props.orderDetail.id"
      :work-no="editingFeeId ? props.orderDetail.orderNo : ''"
      :fee-id="editingFeeId"
      @update="onUpdateTableData"
    />
  </div>
</template>

<style scoped lang="scss">
  .order-fee-list {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 12px;
    box-sizing: border-box;
    row-gap: 8px;

    .header {
      display: flex;
      align-items: center;
      column-gap: 8px;

      .title {
        font-size: 14px;
        font-weight: bold;
        padding-left: 6px;
        border-left: 3px solid #007cff;
        display: flex;
        align-items: center;
        column-gap: 4px;
      }
    }

    .footer {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
